前端基础 |
您所在的位置:网站首页 › background color 不生效 › 前端基础 |
背景属性
a) 背景颜色
语法:background-color:颜色值 示意图![]() 语法:background-image:url(图片路径) 示意图![]() 语法:background-repeat:值 取值:no-repeat不平铺,repeat-x横向平铺,repeat-y纵向平铺,repeat横向纵向都平铺------默认 示意图![]() 语法:background-position:水平位置,垂直位置 位置的取值可以为像素(相对左上角定点的位置),也可以为关键字:top left bottom right center 示意图![]() 多学一招: 1.还可以使用百分比,不太常用:位置的固定规则为盒子自身的宽高百分比减去图片的宽高百分比,如下图: 示意图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e83lE2oV-1585552032704)(img/背景定位的百分比.png)]2.在使用位置关键字的时候,关键字的前后顺序对结果不产生影响 3.可以只有一个值,代表水平方向和垂直方向都是这个值 ----此规则适用于关键字center,和百分比以及具体的像素 4.当只有一个值,且值为上下左右关键字时,上下左右只能代表x轴或y轴之一,另一个方向默认为center e) 设置背景图片大小语法:background-size:宽度 高度 宽高取值可以是像素也可以是百分比 示意图![]() 语法:background:颜色 url(图片路径) 平铺类型 位置/大小 示意图![]() 多学一招:属性中的每个值顺序可以调整,且background可以为单独其中之一设置 g) 设置背景是否受滚动条的影响语法:background-attachment:值 取值: (1)scroll会受滚动条的影响,当内容滚动到下方,图片会消失----默认 (2)fixed不会受滚动条影响,一直保持在视线范围内 示意图![]() 背景可以设置为透明 background:rgba(); /* a代表透明度,取值为0-1 */背景和图片标签都可以让页面中显示图片,那有什么区别? img和背景图片的区别: img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高 一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图 而且背景图可以让内部的文字盖在上面,但是img不行(除非后期用定位) h) 背景颜色渐变 ①线性渐变语法: :linear-gradient([ ,]? [, ]+); :[ left | right ]? [ top | bottom ]? || ? : [ | ]?取值: left: 设置左边为渐变起点的横坐标值。 right: 设置右边为渐变起点的横坐标值。 top: 设置顶部为渐变起点的纵坐标值。 bottom: 设置底部为渐变起点的纵坐标值。 : 用角度值指定渐变的方向(或角度),单位deg。 : 指定渐变的起止颜色。 : 指定颜色。请参阅颜色值 : 用长度值指定起止色位置。不允许负值 : 用百分比指定起止色位置。 写法一:代码: div{ width:300px; height:200px; background:linear-gradient(red,black); /* 表示颜色从上往下,从红色到绿色转换,各占50%(默认) */ } 效果图![]() 代码 div{ width:300px; height:200px; background:linear-gradient(to right,red,black); /* 表示颜色的渐变方向(也是九宫格) */ } 效果图![]() 代码 div{ width:300px; height:200px; background:linear-gradient(45deg,red,black); /* 表示中间的水平线顺时针旋转10度开始渐变 */ } 效果图![]() ![]() 代码 div{ width:300px; height:200px; background:linear-gradient(red 20%,black 50%,pink); /* 表示颜色渐变所占的百分比 */ } 效果图![]() 代码 div{ width:300px; height:200px; background:linear-gradient(to top right,red 20%,black 30%,pink); /* 复合写法,表示颜色从左下角往右上角,从红色开始渐变到20%,再由黑色从20%渐变到30%,剩下的都是粉色 */ } 效果图![]() 颜色渐变方向有:to bottom、to top、to left、to right、to top right、to top left、to bottom left、to bottom right【其实就是一个四边形的四条边与四个角】 ②径向渐变语法: :radial-gradient([ ,]? [ [ || ] | {2},]? [, ]+); :[ ① | ① | left | center① | right ]? [ ② | ② | top | center② | bottom ]? :circle | ellipse :closest-side | closest-corner | farthest-side | farthest-corner | contain | cover : | : [ | ]?取值: ①: 用百分比指定径向渐变圆心的横坐标值。可以为负值。 ①: 用长度值指定径向渐变圆心的横坐标值。可以为负值。 left: 设置左边为径向渐变圆心的横坐标值。 center①: 设置中间为径向渐变圆心的横坐标值。 right: 设置右边为径向渐变圆心的横坐标值。 ②: 用百分比指定径向渐变圆心的纵坐标值。可以为负值。 ②: 用长度值指定径向渐变圆心的纵坐标值。可以为负值。 top: 设置顶部为径向渐变圆心的纵坐标值。 center②: 设置中间为径向渐变圆心的纵坐标值。 bottom: 设置底部为径向渐变圆心的纵坐标值。 : 指定渐变的起止颜色。 circle: 指定圆形的径向渐变 ellipse: 指定椭圆形的径向渐变。写本文档时Chrome,Safari尚不支持该参数值 closest-side: 指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side: 指定径向渐变的半径长度为从圆心到离圆心最远的边 farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角 contain: 包含,指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side cover: 覆盖,指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner 写本文档时Firefox尚不支持 : 用百分比指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 : 用长度值指定径向渐变的横向或纵向直径长度,并根据横向和纵向的直径来确定是圆或椭圆。不允许负值。 : 指定颜色。请参阅颜色值 : 用长度值指定起止色位置。不允许负值 : 用百分比指定起止色位置。 写法一:代码 div{ width:300px; height:200px; background:radial-gradient(orange,black); /* 从中心点向四周扩散渐变 */ } 效果图![]() 多学一招:div如果是正方形,扩散的形状会是圆形 div{ width:200px; height:200px; background:radial-gradient(orange,black); } 效果图![]() 代码 div{ width:200px; height:200px; background:radial-gradient(orange 20%,black 30%,red 70%); /* 代表颜色扩散到哪个位置停止渐变 */ } 效果图![]() 多学一招:除了使用百分比还可以使用具体像素设置停止渐变的位置 div{ width:200px; height:200px; background:radial-gradient(orange 50px,black 30%,red 70%); /* 橘色区域半径50px */ } 效果图![]() 因为50像素已经超过30%,所以橘色部分没有渐变(试试橘色和黑色都是30%) 写法三:代码: div{ width:300px; height:200px; background:radial-gradient(circle,orange 10%,black 50%); /* 指定渐变的形状 */ } 效果图![]() 注意:指定形状的时候可以是circle圆形,也可以是ellipse椭圆 写法四:代码: div{ width:300px; height:200px; background:radial-gradient(circle 100px,orange 10%,black 50%); /* 指定渐变的区域大小,因为是圆形,所以代表宽100px高也是100px */ } 效果图![]() 注意:如果指定的**形状是圆形**,那么指定区域大小的时候只需要一个值就好,可要是椭圆形的时候需要两个值,因为椭圆的宽和高不一样,否则直接不能显示页面 div{ width:300px; height:200px; background:radial-gradient(ellipse 200px 100px,orange 10%,black 50%); /* 指定椭圆形的区域大小需要两个值一个宽一个高 */ } 效果图![]() 代码: div{ width:300px; height:200px; background:radial-gradient(ellipse 200px 100px at right bottom,orange 10%,black 50%); /* 指定径向渐变的圆心 */ } 效果图![]() 多学一招:圆心默认在中心,或者使用关键字center ③重复线性渐变语法: repeating-linear-gradient(方向,颜色 结束百分比,...);例: div{ width:300px; height:200px; background:repeating-linear-gradient(to right bottom,red 10%,green 20%); /* 渐变方向为右下角,指定每种颜色的结束位置,重复渐变 */ } 效果图![]() 语法: repeating-radial-gradient(形状 方向,颜色 结束百分比,...;例: div{ width:300px; height:200px; background:repeating-radial-gradient(ellipse at center,red 10%,green 20%); /* 渐变形状为椭圆,渐变中心为中心,指定每种颜色的结束位置,重复渐变 */ } 效果图![]() 注意:未指定颜色值的结束位置时,颜色是平均分配的 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |